<template>
  <!-- 学习页面组件 -->
  <div class="learn">
    <!-- 顶部导航区域 -->
    <van-nav-bar title="已购课程" />

    <!-- 课程列表区域 -->
    <content-list :fetch-data="fetchData"></content-list>

    <!-- 全局底部导航组件 -->
    <layout-footer></layout-footer>
  </div>
</template>

<script>
// 导入接口
// 1、getPurchaseCourse：获取已购课程接口
import { getPurchaseCourse } from '@/services/course'

// 导入 vant 组件
import { NavBar } from 'vant'

// 导入组件
// 导入全局列表组件
import ContentList from '@/components/ContentListComponent/ContentList.vue'
// 导入全局底部导航组件
import LayoutFooter from '@/components/LayoutFooterComponent/LayoutFooter.vue'

export default {
  name: 'Learn',
  components: {
    VanNavBar: NavBar,
    ContentList, // 全局列表组件
    LayoutFooter // 全局底部导航组件
  },
  methods: {
    // 要传递给子组件的请求接口函数
    fetchData () {
      return getPurchaseCourse()
    }
  }
}
</script>

<style lang="scss" scoped></style>
